<template>
  <div class="container">
    <van-nav-bar fixed @click-left="onClickLeft" @click-right="showSetPopup = true">
      <template #left>
        <van-icon name="apps-o" size="20" />
      </template>
      <template #right>
        <van-icon name="ellipsis" size="20" />
      </template>
    </van-nav-bar>

    <div class="profile-box">
      <div class="profile" v-if="isLogin">
        <span class="avatar" @click="profileHandle">
          <img :src="userInfo.avatar" />
        </span>
        <div class="name">
          <span> {{ userInfo.name }}</span>
          <span class="setting" @click="profileHandle">个人主页 ></span>
        </div>
      </div>
      <div class="overview" v-else>
        <span class="avatar" @click="profileHandle">
          <img v-lazy="imageUrl" />
        </span>
        <div class="name" @click="router.push('/login')">
          <span>点击登录</span>
        </div>
      </div>
    </div>
    <div class="box order-box">
      <div class="title">订单</div>
      <div class="list">
        <div
          v-for="item in orderItems"
          :key="item.type"
          class="item"
          @click="router.push({ path: '/order/list', query: { tab: item.type } })"
        >
          <star-icon :name="item.icon" class="icon"></star-icon>
          <span>{{ item.text }}</span>
        </div>
      </div>
    </div>

    <van-popup v-model:show="showSetPopup" position="bottom" round :style="{ height: '20%' }">
      <div class="popup-list">
        <div class="item" v-for="item in popupItems" :key="item.value" @click="popupHandle(item)">
          <star-icon :name="item.icon"></star-icon>
          <span>{{ item.title }}</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script setup lang="ts">
import { getUserAPI, logoutAPI } from '@/api/user'
import { useUserStore } from '@/stores'
import type { UserResult } from '@/types/user'
import { showFailToast } from 'vant'
import { ref, onMounted, computed, onActivated } from 'vue'
import { useRouter } from 'vue-router'
import { useCartStore } from '@/stores/modules/cart'
const imageUrl = ref('')
import('/images/logo.png').then((module) => {
  imageUrl.value = module.default
})
const router = useRouter()
// 用户store
const userStore = useUserStore()
// 购物车store
const cartStore = useCartStore()
// 用户是否登录
const isLogin = computed(() => userStore.isLogin)
// 用户详细信息
const userInfo = ref({} as UserResult)
const getUser = async () => {
  if (isLogin.value) {
    try {
      const { data } = await getUserAPI(userStore.user.id)
      userInfo.value = data
    } catch (error) {
      console.log(error)
    }
  }
}
// 订单选项
const orderItems = [
  { type: 0, text: '全部订单', icon: 'order-all_order' },
  { type: 1, text: '待付款', icon: 'order-wait_order' },
  { type: 5, text: '待评价', icon: 'order-evaluate_order' },
  { type: 6, text: '退款', icon: 'order-refund_order' },
]
interface PopupItem {
  value: number
  title: string
  icon: string
  url: string
}
// 弹窗选项
const popupItems: PopupItem[] = [
  { value: 1, title: '编辑资料', icon: 'my-edit', url: '/my/profile' },
  { value: 2, title: '收货地址', icon: 'order-address', url: '/my/address' },
  { value: 0, title: '退出登录', icon: 'login-logout', url: '/login' },
]
// 是否展示设置弹出层
const showSetPopup = ref(false)
// 通过 actions 属性来定义菜单选项
const onClickLeft = () => {}
// 弹窗
const popupHandle = async (item: PopupItem) => {
  if (item.value === 0) {
    await logoutAPI()
    router.push('/login')
    cartStore.clearCart()
    userStore.removeUser()
    localStorage.clear()
  } else {
    router.push(item.url)
  }
}
// 判断是否登录并跳转个人资料页
const profileHandle = () => {
  if (!userStore.user) {
    showFailToast('当前未登录，请登录')
    router.push('/login')
  } else {
    router.push('/my/profile')
  }
}
onActivated(() => {
  console.log('个人中心页面激活')
})

onMounted(() => {
  getUser()
})
</script>
<style scoped lang="scss">
.van-nav-bar {
  background-color: #eff2f5;
}
.profile-box {
  margin: 0 10px;
  margin-top: 46px;
  min-height: 100px;
  .profile,
  .overview {
    height: 100%;
    max-width: 375px;
    display: flex;
    align-items: center;
    // box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  }
}
.avatar {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  display: inline-block;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.name {
  min-height: 20px;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 16px;
  margin-left: 14px;
  font-weight: 600;
  .setting {
    color: #888;
    font-size: 12px;
  }
}
.order-box {
  padding: 10px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  .list {
    margin: 10px;
    display: flex;
    justify-content: space-between;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .active {
      font-weight: 700;
    }
  }
}
.popup-list {
  height: 100%;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

  .item {
    display: flex;
    align-items: center;

    .star-icon {
      width: 1.5em;
      height: 1.5em;
    }
    span {
      margin-left: 10px;
    }
  }
}
</style>
